<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: null,
      chartData: []
    }
  },
  props: {
    params: {
      type: Array,
      default: () => []
    }
  },
    beforeDestroy() {
        this.myChart && this.myChart.dispose()
    },
  created() {},
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.chart)
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      let chart = TweenMax.to(this.$refs.chart, 0.1, { opacity: 1 })
      tl.add(chart, 0).add(this.initChart, 0.1)
      return tl
    },
    initChart() {
      if (this.myChart) {
        this.myChart.clear()
      }
      let option = this.getOption()
      this.myChart.setOption(option)
    },
    getOption() {
      let option = {
        radar: [
          {
            shape: 'circle',
            indicator: this.getIndicator(),
            center: ['50%', '46%'],
            radius: 100,
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                color: 'rgba(36, 224, 241 , .3)',
                type: 'dashed'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(36, 224, 241 , .3)'
              }
            },
            splitArea: {
                areaStyle: {
                    color: ['rgba(36, 224, 241 , 0.05)', 'rgba(36, 224, 241 , 0.15)']
                }
            },
            axisName: {
              fontSize: 14,
              fontWeight: 'bold'
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'radar',
            data: [{
                value: this.chartData,
                lineStyle: {
                    color: 'rgba(36, 224, 241 , .9)'
                },
                itemStyle: {
                    color: 'rgba(36, 224, 241 , 0)'
                },
                areaStyle: {
                    color: 'rgba(36, 224, 241 , .7)'
                }
            }]
          }
        ]
      }
      return option
    },
    getIndicator() {
      let arr = [],
        data = []
      this.params.map((i) => {
        arr.push({ text: i.name, max: i.max, color: 'rgba(36, 224, 241 , 1)' })
        data.push(i.value)
      })
      this.chartData = data
      return arr
    },
    destory(){
        this.myChart && this.myChart.clear()
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>
